<template>
  <div class="activity-detail-container">
    <!-- 活动基本信息 -->
    <el-card class="activity-info-card" shadow="never">
      <template #header>
        <div class="card-header">
          <span class="title">活动详情</span>
          <div class="actions">
            <el-button @click="$router.back()">
              <IconifyIconOffline icon="ep:back" class="mr-1" />
              返回
            </el-button>
            <el-button type="primary" @click="handleEdit">
              <IconifyIconOffline icon="ep:edit" class="mr-1" />
              编辑
            </el-button>
          </div>
        </div>
      </template>

      <div class="activity-content">
        <div class="activity-header">
          <div class="cover-section">
            <img
              :src="activity.cover"
              :alt="activity.name"
              class="activity-cover"
            />
          </div>

          <div class="info-section">
            <h1 class="activity-title">{{ activity.name }}</h1>

            <div class="activity-meta">
              <div class="meta-item">
                <IconifyIconOffline icon="ep:calendar" class="meta-icon" />
                <span
                  >{{ formatDateTime(activity.startTime) }} -
                  {{ formatDateTime(activity.endTime) }}</span
                >
              </div>

              <div class="meta-item">
                <IconifyIconOffline icon="ep:location" class="meta-icon" />
                <span
                  >{{ activity.province }}{{ activity.city
                  }}{{ activity.district }} {{ activity.address }}</span
                >
              </div>

              <div class="meta-item">
                <IconifyIconOffline
                  icon="ep:office-building"
                  class="meta-icon"
                />
                <span>{{ activity.venue }}</span>
              </div>

              <div class="meta-item">
                <IconifyIconOffline icon="ep:user" class="meta-icon" />
                <span
                  >{{ activity.currentParticipants }}/{{
                    activity.maxParticipants
                  }}
                  人</span
                >
              </div>

              <div class="meta-item">
                <IconifyIconOffline icon="ep:money" class="meta-icon" />
                <span v-if="activity.feeType === 'free'" class="free-tag"
                  >免费</span
                >
                <span v-else class="fee-tag">¥{{ activity.fee }}</span>
              </div>
            </div>

            <div class="status-section">
              <el-tag :type="getStatusType(activity.status)" size="large">
                {{ getStatusText(activity.status) }}
              </el-tag>

              <el-tag v-if="activity.isPublic" type="success" size="large">
                公开活动
              </el-tag>

              <el-tag v-if="activity.allowWaitlist" type="info" size="large">
                允许候补
              </el-tag>
            </div>
          </div>
        </div>

        <div class="activity-description">
          <h3>活动描述</h3>
          <p>{{ activity.description }}</p>
        </div>
      </div>
    </el-card>

    <!-- 报名设置 -->
    <el-card class="settings-card" shadow="never">
      <template #header>
        <span class="title">报名设置</span>
      </template>

      <div class="settings-content">
        <el-row :gutter="20">
          <el-col :span="8">
            <div class="setting-item">
              <div class="setting-label">报名权限</div>
              <div class="setting-value">
                {{ getSignUpTypeText(activity.signUpType) }}
              </div>
            </div>
          </el-col>

          <el-col :span="8">
            <div class="setting-item">
              <div class="setting-label">收费方式</div>
              <div class="setting-value">
                {{ getPaymentMethodText(activity.paymentMethod) }}
              </div>
            </div>
          </el-col>

          <el-col :span="8">
            <div class="setting-item">
              <div class="setting-label">其他设置</div>
              <div class="setting-value">
                <el-tag v-if="activity.allowTransfer" type="info" size="small"
                  >允许转让</el-tag
                >
                <el-tag v-if="activity.allowBringGuest" type="info" size="small"
                  >允许带人</el-tag
                >
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-card>

    <!-- 联系信息 -->
    <el-card class="contact-card" shadow="never">
      <template #header>
        <span class="title">联系信息</span>
      </template>

      <div class="contact-content">
        <el-row :gutter="20">
          <el-col :span="8">
            <div class="contact-item">
              <IconifyIconOffline icon="ep:user" class="contact-icon" />
              <div>
                <div class="contact-label">联系人</div>
                <div class="contact-value">{{ activity.contactName }}</div>
              </div>
            </div>
          </el-col>

          <el-col :span="8">
            <div class="contact-item">
              <IconifyIconOffline icon="ep:phone" class="contact-icon" />
              <div>
                <div class="contact-label">联系电话</div>
                <div class="contact-value">{{ activity.contactPhone }}</div>
              </div>
            </div>
          </el-col>

          <el-col :span="8">
            <div class="contact-item">
              <IconifyIconOffline
                icon="ep:chat-dot-round"
                class="contact-icon"
              />
              <div>
                <div class="contact-label">微信号</div>
                <div class="contact-value">
                  {{ activity.wechat || "未填写" }}
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-card>

    <!-- 参与者列表 -->
    <el-card class="participants-card" shadow="never">
      <template #header>
        <div class="card-header">
          <span class="title">参与者列表 ({{ participants.length }})</span>
          <el-button type="primary" size="small" @click="exportParticipants">
            <IconifyIconOffline icon="ep:download" class="mr-1" />
            导出名单
          </el-button>
        </div>
      </template>

      <el-table :data="participants" stripe>
        <el-table-column prop="id" label="序号" width="80" />
        <el-table-column prop="avatar" label="头像" width="80">
          <template #default="{ row }">
            <el-avatar :src="row.avatar" :size="40">
              {{ row.nickname?.charAt(0) }}
            </el-avatar>
          </template>
        </el-table-column>
        <el-table-column prop="nickname" label="昵称" />
        <el-table-column prop="realName" label="真实姓名" />
        <el-table-column prop="phone" label="手机号" />
        <el-table-column prop="signUpTime" label="报名时间">
          <template #default="{ row }">
            {{ formatDateTime(row.signUpTime) }}
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态">
          <template #default="{ row }">
            <el-tag :type="getParticipantStatusType(row.status)">
              {{ getParticipantStatusText(row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          v-if="activity.feeType === 'paid'"
          prop="paymentStatus"
          label="支付状态"
        >
          <template #default="{ row }">
            <el-tag :type="getPaymentStatusType(row.paymentStatus)">
              {{ getPaymentStatusText(row.paymentStatus) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="120">
          <template #default="{ row }">
            <el-button
              type="primary"
              link
              size="small"
              @click="viewParticipant(row)"
            >
              查看
            </el-button>
            <el-button
              type="danger"
              link
              size="small"
              @click="removeParticipant(row)"
            >
              移除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 操作记录 -->
    <el-card class="logs-card" shadow="never">
      <template #header>
        <span class="title">操作记录</span>
      </template>

      <el-timeline>
        <el-timeline-item
          v-for="log in operationLogs"
          :key="log.id"
          :timestamp="formatDateTime(log.createTime)"
          placement="top"
        >
          <div class="log-content">
            <div class="log-action">{{ log.action }}</div>
            <div class="log-operator">操作人：{{ log.operator }}</div>
            <div v-if="log.remark" class="log-remark">{{ log.remark }}</div>
          </div>
        </el-timeline-item>
      </el-timeline>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
import { IconifyIconOffline } from "@/components/ReIcon";
import dayjs from "dayjs";

const route = useRoute();
const router = useRouter();

// 活动详情数据
const activity = ref({
  id: 1,
  name: "周末羽毛球友谊赛",
  type: "badminton",
  description:
    "欢迎所有羽毛球爱好者参加我们的周末友谊赛！无论你是初学者还是高手，都能在这里找到合适的对手。我们提供专业的场地和裁判，让你享受纯粹的羽毛球乐趣。活动结束后还有聚餐环节，大家可以互相交流球技。",
  cover:
    "https://trae-api-sg.mchost.guru/api/ide/v1/text_to_image?prompt=badminton%20court%20with%20players%20in%20action%2C%20modern%20sports%20facility%2C%20bright%20lighting&image_size=landscape_16_9",
  startTime: "2024-01-20 14:00:00",
  endTime: "2024-01-20 18:00:00",
  province: "广东省",
  city: "深圳市",
  district: "南山区",
  address: "科技园南区深南大道9988号",
  venue: "深圳湾体育中心羽毛球馆",
  maxParticipants: 20,
  currentParticipants: 15,
  feeType: "paid",
  fee: 50,
  paymentMethod: "online",
  signUpType: "public",
  allowWaitlist: true,
  allowTransfer: true,
  allowBringGuest: false,
  isPublic: true,
  contactName: "张教练",
  contactPhone: "13800138000",
  wechat: "coach_zhang",
  status: "ongoing",
  creator: "管理员",
  createTime: "2024-01-15 10:00:00"
});

// 参与者列表
const participants = ref([
  {
    id: 1,
    avatar:
      "https://trae-api-sg.mchost.guru/api/ide/v1/text_to_image?prompt=professional%20headshot%20of%20young%20asian%20man%2C%20friendly%20smile&image_size=square",
    nickname: "羽球达人",
    realName: "李明",
    phone: "13800138001",
    signUpTime: "2024-01-16 09:30:00",
    status: "confirmed",
    paymentStatus: "paid"
  },
  {
    id: 2,
    avatar:
      "https://trae-api-sg.mchost.guru/api/ide/v1/text_to_image?prompt=professional%20headshot%20of%20young%20asian%20woman%2C%20confident%20expression&image_size=square",
    nickname: "小鸟飞飞",
    realName: "王小美",
    phone: "13800138002",
    signUpTime: "2024-01-16 14:20:00",
    status: "confirmed",
    paymentStatus: "paid"
  },
  {
    id: 3,
    avatar:
      "https://trae-api-sg.mchost.guru/api/ide/v1/text_to_image?prompt=professional%20headshot%20of%20middle%20aged%20asian%20man%2C%20sporty%20look&image_size=square",
    nickname: "运动健将",
    realName: "陈强",
    phone: "13800138003",
    signUpTime: "2024-01-17 11:15:00",
    status: "waitlist",
    paymentStatus: "pending"
  }
]);

// 操作记录
const operationLogs = ref([
  {
    id: 1,
    action: "创建活动",
    operator: "管理员",
    createTime: "2024-01-15 10:00:00",
    remark: "初始创建"
  },
  {
    id: 2,
    action: "修改活动信息",
    operator: "管理员",
    createTime: "2024-01-16 08:30:00",
    remark: "更新活动描述"
  },
  {
    id: 3,
    action: "用户报名",
    operator: "李明",
    createTime: "2024-01-16 09:30:00",
    remark: "在线支付成功"
  }
]);

// 格式化日期时间
const formatDateTime = (dateTime: string) => {
  return dayjs(dateTime).format("YYYY-MM-DD HH:mm");
};

// 获取状态类型
const getStatusType = (status: string) => {
  const statusMap: Record<string, string> = {
    draft: "info",
    published: "success",
    ongoing: "warning",
    completed: "success",
    cancelled: "danger"
  };
  return statusMap[status] || "info";
};

// 获取状态文本
const getStatusText = (status: string) => {
  const statusMap: Record<string, string> = {
    draft: "草稿",
    published: "已发布",
    ongoing: "进行中",
    completed: "已结束",
    cancelled: "已取消"
  };
  return statusMap[status] || "未知";
};

// 获取报名权限文本
const getSignUpTypeText = (type: string) => {
  const typeMap: Record<string, string> = {
    public: "所有人",
    club: "俱乐部成员",
    invite: "邀请码"
  };
  return typeMap[type] || "未知";
};

// 获取收费方式文本
const getPaymentMethodText = (method: string) => {
  if (!method) return "免费活动";
  const methodMap: Record<string, string> = {
    online: "线上支付",
    offline: "线下支付",
    prepaid: "预付款"
  };
  return methodMap[method] || "未知";
};

// 获取参与者状态类型
const getParticipantStatusType = (status: string) => {
  const statusMap: Record<string, string> = {
    confirmed: "success",
    waitlist: "warning",
    cancelled: "danger"
  };
  return statusMap[status] || "info";
};

// 获取参与者状态文本
const getParticipantStatusText = (status: string) => {
  const statusMap: Record<string, string> = {
    confirmed: "已确认",
    waitlist: "候补",
    cancelled: "已取消"
  };
  return statusMap[status] || "未知";
};

// 获取支付状态类型
const getPaymentStatusType = (status: string) => {
  const statusMap: Record<string, string> = {
    paid: "success",
    pending: "warning",
    failed: "danger",
    refunded: "info"
  };
  return statusMap[status] || "info";
};

// 获取支付状态文本
const getPaymentStatusText = (status: string) => {
  const statusMap: Record<string, string> = {
    paid: "已支付",
    pending: "待支付",
    failed: "支付失败",
    refunded: "已退款"
  };
  return statusMap[status] || "未知";
};

// 编辑活动
const handleEdit = () => {
  router.push(`/activity/edit/${activity.value.id}`);
};

// 查看参与者
const viewParticipant = (participant: any) => {
  ElMessage.info(`查看参与者：${participant.nickname}`);
};

// 移除参与者
const removeParticipant = async (participant: any) => {
  try {
    await ElMessageBox.confirm(
      `确定要移除参与者 "${participant.nickname}" 吗？`,
      "确认移除",
      {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }
    );

    // 这里应该调用API移除参与者
    ElMessage.success("移除成功");
  } catch {
    // 用户取消
  }
};

// 导出参与者名单
const exportParticipants = () => {
  // 这里应该调用导出API
  ElMessage.success("导出成功");
};

// 加载活动详情
const loadActivityDetail = async () => {
  const activityId = route.params.id;
  // 这里应该根据ID调用API获取活动详情
  console.log("加载活动详情:", activityId);
};

onMounted(() => {
  loadActivityDetail();
});
</script>

<style scoped lang="scss">
.activity-detail-container {
  padding: 20px;
  background-color: #f5f7fa;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;

  .title {
    font-size: 18px;
    font-weight: 600;
    color: #303133;
  }

  .actions {
    display: flex;
    gap: 8px;
  }
}

.activity-info-card,
.settings-card,
.contact-card,
.participants-card,
.logs-card {
  margin-bottom: 20px;

  &:last-child {
    margin-bottom: 0;
  }
}

.activity-content {
  .activity-header {
    display: flex;
    gap: 30px;
    margin-bottom: 30px;

    .cover-section {
      flex-shrink: 0;

      .activity-cover {
        width: 300px;
        height: 200px;
        object-fit: cover;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      }
    }

    .info-section {
      flex: 1;

      .activity-title {
        font-size: 24px;
        font-weight: 600;
        color: #303133;
        margin: 0 0 20px 0;
      }

      .activity-meta {
        margin-bottom: 20px;

        .meta-item {
          display: flex;
          align-items: center;
          margin-bottom: 12px;

          .meta-icon {
            font-size: 16px;
            color: #909399;
            margin-right: 8px;
            width: 16px;
          }

          .free-tag {
            color: #67c23a;
            font-weight: 600;
          }

          .fee-tag {
            color: #e6a23c;
            font-weight: 600;
          }
        }
      }

      .status-section {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
      }
    }
  }

  .activity-description {
    h3 {
      font-size: 16px;
      font-weight: 600;
      color: #303133;
      margin: 0 0 12px 0;
    }

    p {
      color: #606266;
      line-height: 1.6;
      margin: 0;
    }
  }
}

.settings-content {
  .setting-item {
    .setting-label {
      font-size: 14px;
      color: #909399;
      margin-bottom: 4px;
    }

    .setting-value {
      font-size: 16px;
      color: #303133;
      font-weight: 500;

      .el-tag {
        margin-right: 4px;
      }
    }
  }
}

.contact-content {
  .contact-item {
    display: flex;
    align-items: center;
    gap: 12px;

    .contact-icon {
      font-size: 20px;
      color: #409eff;
    }

    .contact-label {
      font-size: 12px;
      color: #909399;
      margin-bottom: 2px;
    }

    .contact-value {
      font-size: 14px;
      color: #303133;
      font-weight: 500;
    }
  }
}

.log-content {
  .log-action {
    font-weight: 600;
    color: #303133;
    margin-bottom: 4px;
  }

  .log-operator {
    font-size: 12px;
    color: #909399;
    margin-bottom: 2px;
  }

  .log-remark {
    font-size: 12px;
    color: #606266;
  }
}

@media (max-width: 768px) {
  .activity-detail-container {
    padding: 10px;
  }

  .activity-header {
    flex-direction: column;
    gap: 20px;

    .cover-section .activity-cover {
      width: 100%;
      max-width: 300px;
    }
  }

  .card-header {
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;

    .actions {
      width: 100%;
      justify-content: flex-end;
    }
  }
}
</style>
